<template>
    <div style="height:100%;background:#F0F0F0">
        <yd-layout>   
            <yd-navbar slot="navbar" title="欠罚款信息" style="height:1rem;font-size:.1rem"></yd-navbar>
            <div>
                <div style="height:.25rem"></div>
                <div style="height:1rem;text-align:center;font-size:.5rem;color:#2DC3E8;font-weight:bold">
                    贵州中医药大学图书馆
                </div>
                <div>
                    <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                        <yd-cell-item>
                            <span slot="left" style="font-size:.3rem;font-weight:bold">我的借书证号：</span>
                            <span slot="right" style="font-size:.4rem;color:#2DC3E8;font-weight:bold">{{dztm}}</span>
                        </yd-cell-item>
                    </yd-cell-group>
                    <div v-if="isShow">
                        <div v-for="item in list" :key="item.key" style="margin:.15rem .0rem 0.05rem 0rem;">
                            <div class="div1"> 
                                <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                                    <yd-cell-item>
                                        <span slot="left">书名：</span>
                                        <span slot="right">
                                            <div style="height:.8rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-if="item.TM.length>18">{{item.tm}}</div>
                                            <div style="height:.35rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-else>{{item.TM}}</div>
                                        </span>
                                    </yd-cell-item>
                                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                    <yd-cell-item>
                                        <span slot="left"> {{item.lx}}款金额</span>
                                        <span slot="right" style="font-size:.35rem;color:red">{{item.JE}}</span>
                                        <span slot="right" style="font-size:.3rem;">元</span>
                                    </yd-cell-item>
                                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                    <yd-cell-item>
                                        <span slot="left"> {{item.lx}}款原因</span>
                                        <span slot="right" style="font-size:.3rem;">{{item.yy}}</span>
                                    </yd-cell-item>
                                    <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                </yd-cell-group>
                            </div>
                        </div>
                        <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                            <yd-cell-item>
                                <span slot="left" style="font-size:.3rem;font-weight:bold">应交总金额：</span>
                                <span slot="right" style="font-size:.4rem;color:red;font-weight:bold">{{zje}}</span>
                                <span slot="right" style="font-size:.3rem;">元</span>
                            </yd-cell-item>
                        </yd-cell-group>
                        <div style="text-align:center;">
                                <yd-button bgcolor="#2DC3E8" style="text-align:center;font-size:.3rem;font-weight:bold;color:white;margin:0.15rem 0rem 0.15rem 0rem;" 
                                @click.native="submit" >交费</yd-button>
                            </div>
                    </div>
                    <div v-else style="margin:0.25rem 0rem 0rem 0.4rem;text-align:center;font-size:.35rem;font-weight:bold">
                        您好，您暂时未有欠费信息！
                    </div>
                </div> 
            </div>
            <yd-tabbar slot="tabbar">
                <yd-tabbar-item title="我要找书" link="#" active @click.native="scanCode()">
                    <yd-icon name="search" slot="icon"></yd-icon>
                </yd-tabbar-item>
            </yd-tabbar>  
        </yd-layout>           
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
Vue.component(Layout.name, Layout);
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
import {NavBar, NavBarBackIcon, NavBarNextIcon} from 'vue-ydui/dist/lib.rem/navbar';
Vue.component(NavBar.name, NavBar);
Vue.component(NavBarBackIcon.name, NavBarBackIcon);
Vue.component(NavBarNextIcon.name, NavBarNextIcon);
import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);
import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
    confirm: Confirm,
    alert: Alert,
    toast: Toast,
    notify: Notify,
    loading: Loading,
};
export default {
    data() {
        return {
            dztm:window.localStorage.getItem("dztm"),
            isShow:true,
            list:[],
            zje: 9.06
        }
    },
    created(){
        if(window.localStorage.getItem("dztm") == null|| window.localStorage.getItem("dztm") == ''){
            this.getUser();
        }else{
            this.dztm = window.localStorage.getItem("dztm")
            this.mockTableData()
        }
    },
    methods:{
        mockTableData(){
            // this.list =  [{"tm":"计算机科学与技术1","wjsj":"2019-04-25","yghsj":"2019-05-25","fk":"2.02","fkyy":"超期罚款"},
            //         {"tm":"计算机科学与技术2","wjsj":"2019-04-25","yghsj":"2019-05-25","fk":"3.02","fkyy":"超期罚款"},
            //         {"tm":"计算机科学与技术3","wjsj":"2019-04-25","yghsj":"2019-05-25","fk":"4.02","fkyy":"超期罚款"}];
            let datas = [];
            this.list = [];
            //获取用户的借书记录
            let that_ = this;
            axios.get('/api/libiary/money?dztm='+that_.dztm,{withCredentials: true})
            .then(function (res) {  
                console.log(res)  
                console.log("aaaaaaaaaaa")  
                let temp = res.data.data
                that_.zje = temp.zje;
                console.log(temp)
                console.log(temp.list)
                if(temp.zje == 0){
                    that_.isShow = false;
                    that_.$dialog.alert({mes: '您好，暂时没有欠费信息！！'});
                }else{
                    if(temp.list != null && temp.list.length > 0){
                        temp.list.forEach( v=>{
                            if(v.CZLX == 'F' && v.CQTS > 0){
                                v['lx'] = "罚"
                                v["yy"] = "还款超期"+v.CQTS+"天";
                            }else if(v.CZLX == 'D'){
                                v['lx'] = "赔"
                                v["yy"] = "赔款原因";
                            }else{
                                v['lx'] = "罚" 
                                v["yy"] = "罚款原因";   
                            }
                            that_.list.push(v)
                        })
                    }    
                }                 
            })
            .catch(function (error) {
                console.log(error);
                that_.$dialog.toast({
                    mes: "服务器繁忙，请稍后再试！",
                    timeout: 2500,
                    icon: 'error',
                }); 
            }); 
        },
        submit(data){
            this.$dialog.confirm({
                title: '交费确认',
                mes: '您确定交费【'+this.zje+'】元？',
                opts: () => {
                    this.pay();
                }
            });
        },
        //续借操作
        pay(){
            console.log("pay")
            this.$dialog.toast({
                mes: "系统功能维护，暂时未开通支付模块！",
                timeout: 2500,
                icon: 'error',
            }); 
            //var qs = require('querystring');
            // let that_ = this;
            // axios.post(          
            //     "/api/libiary/renew",
            //     qs.stringify({
            //         dztm: that_.dztm,
            //         zjm: data.zjm       
            //     })
            // ).then(function(res){
            //     that_.$dialog.toast({
            //         mes: res.data,
            //         timeout: 1500
            //     }); 
            //     that_.mockTableData();
            //     //that_.$router.go(0);
            // }).catch(function (error) {
            //     console.log(error);
            //     that_.$dialog.toast({
            //         mes: "服务器繁忙，请稍后再试！",
            //         timeout: 2500,
            //         icon: 'error',
            //     }); 
            // });                 
        },
        openCustomConfrim() {
            this.$dialog.confirm({
                title: '温馨提示',
                mes: '您的微信尚未绑定校园卡，请点击绑定按钮进行绑定',
                opts: [
                    {
                        txt: '绑定',
                        color: true,
                        callback: () => {
                            this.$router.push({path: '/bdkh'});
                        }
                    }
                ]
            });
        },
        scanCode(){
            this.$router.push({path: '/scanCode'});
        },
        getUser(){
            let that_ = this
            axios.get('/api/libiary/code',{
                params:{                  
                  appId:appId,
                  code:code,     
                },
                withCredentials:true
            })
            .then(function (res) {      
              console.log(res) 
              if(res.data.data.dztm == null || res.data.data.dztm== ''){
                  that_.openCustomConfrim();
              }else{
                  window.localStorage.setItem("dztm",res.data.data.dztm);
                  window.localStorage.setItem("name",res.data.data.name)  
                  that_.dztm = res.data.data.dztm;
                  that_.mockTableData();
              }                    
            })
            .catch(function (error) {
                console.log(error);
            }); 
        }
    }
}
</script>

<style>
.yd-cell-right {
    min-height:.7rem!important;
}
.div1{
    width:97%;
    height:100%;
    margin:2px auto;
    text-align: center;
    background: white;
    border:1px solid #BFB8C0;
    box-shadow: darkgrey 10px 10px 30px 5px;
}
</style>
    